<template>
  <!-- <div>
    商品新增页面
  </div> -->
  <div class="app-container">
    <el-form label-width="100px" width="200">
        <el-form-item label="用户账号">
          <el-input v-model="goods.userAccount"/>
        </el-form-item>
        <el-form-item label="用户姓名">
          <el-input v-model="goods.userName"/>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="goods.userPhone"/>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="goods.goodsName"/>
        </el-form-item>
        <el-form-item label="仓库名称">
          <!-- <el-input v-model="admin.adminSex"/> -->
          <el-select v-model="goods.currWareName" clearable placeholder="请选择">
            <el-option
              v-for="item in goods.wareNameList"
              :key="item.id"
              :label="item.warehouseName"
              :value="item.warehouseName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品类别">
          <el-select v-model="goods.currGoodsCateName" clearable placeholder="请选择">
            <el-option
              v-for="item in goods.goodsCateNameList"
              :key="item.id"
              :label="item.goodsCateName"
              :value="item.goodsCateName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveGoodsInfo()">保存</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ware from '@/api/ware';
import goods_cate from '@/api/goods_cate';
import goods from '@/api/goods';
export default {
    name:'GoodsSave',
    data(){
        return {
            goods:{
                userAccount:'',
                userName:'',
                userPhone:'',
                goodsName:'',
                wareNameList:[],
                goodsCateNameList:[],
                currWareName:'',
                currGoodsCateName:''
            }
        }
    },
    methods:{
        saveGoodsInfo(){
            console.log('保存的商品数据：', this.goods);
            let goodsDto = {
                userAccount:this.goods.userAccount,
                userName:this.goods.userName,
                userPhone:this.goods.userPhone,
                goodsName:this.goods.goodsName,
                warehouseName:this.goods.currWareName,
                cateName:this.goods.currGoodsCateName
            }
            console.log('待保存的商品数据：', goodsDto);
            goods.saveGoods(goodsDto).then(
                response => {
                    console.log('商品添加响应数据：', response)
                    let resData = response.data.data
                    let resCode = response.data.code
                    let resMsg = response.data.message
                    if(resCode == '200' && resData){
                        //提示
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        })
                        //跳转列表页面，使用路由跳转方式实现
                        this.$router.push({path:'/goods_list'})
                    } else {
                        //异常提示
                        this.$message({
                            type: 'error',
                            message: resMsg
                        })
                    }
                },
                error => {
                    console.error('商品添加异常信息：', error)
                }
            )
        }
    },
    beforeCreate(){
        //初始化下拉列表数据
        ware.showAllWareName().then(
            response => {
                console.log('初始化仓库响应：', response)
                let resCode = response.data.code
                let resMsg = response.data.message
                if(resCode == '200'){
                    this.goods.wareNameList = response.data.data.data_list
                    console.log('初始化仓库列表', this.goods.wareNameList)
                } else {
                    //异常提示
                    this.$message({
                        type: 'error',
                        message: resMsg
                    })
                }
            },
            error => {
                console.error('获取仓库名称异常，异常信息：', error)
            }
        )
        goods_cate.showAllGoodCateName().then(
            response => {
                console.log('初始化商品分类列表响应：', response)
                let resCode = response.data.code
                let resMsg = response.data.message
                if(resCode == '200'){
                    this.goods.goodsCateNameList = response.data.data.data_list
                    console.log('初始化商品分类列表', this.goods.goodsCateNameList)
                } else {
                    //异常提示
                    this.$message({
                        type: 'error',
                        message: resMsg
                    })
                }
            },
            error => {
                console.error('获取商品分类名称列表异常，异常信息：', error)
            }
        )
    }
}
</script>

<style scoped>
  .el-input{
    width: 223px;
  }
</style>